<template>
	<view class="total-box">
		<view class="top">
			<view class="total-item">
				<view class="title">
					收料总计
				</view>
				<view class="total-content">
					<text class="volume">2424方</text>
					<text class="count">101趟</text>
				</view>
			</view>
			<view class="total-item total-item1">
				<view class="title">
					出料总计
				</view>
				<view class="total-content">
					<text class="volume">1212方</text>
					<text class="count">505趟</text>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="nowFieldArea==='4'">
			<up-grid :border="false" :col="4">
				<up-grid-item>
					<view class="item-box">
						<view class="arrow-box">
							<view class="statistics">
								<text class="volume">2424方</text>
								<text class="count">101趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow1.png"></image>
						</view>
						<view class="arrow-box arrow-box1">
							<view class="statistics">
								<text class="volume">120方</text>
								<text class="count">5趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow2.png"></image>
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box area-box area-box1">
						<image class="icon" src="/static/img/consumptionAdmin/rawMaterial.png"></image>
						<view class="name">
							原料区
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box">
						<view class="arrow-box">
							<view class="statistics">
								<text class="volume">1200方</text>
								<text class="count">50趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow1.png"></image>
						</view>
						<view class="arrow-box arrow-box2">
							<view class="statistics">
								<text class="volume">24方</text>
								<text class="count">1趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow3.png"></image>
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box area-box">
						<image class="icon" src="/static/img/consumptionAdmin/production.png"></image>
						<view class="name">
							生产区
						</view>
					</view>
				</up-grid-item>
			</up-grid>
		</view>
		<view class="bottom bottom2" v-if="nowFieldArea==='5'">
			<up-grid :border="false" :col="5">
				<up-grid-item>
					<view class="item-box area-box area-box1">
						<image class="icon" src="/static/img/consumptionAdmin/rawMaterial.png"></image>
						<view class="name">
							原料区
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box">
						<view class="arrow-box">
							<view class="statistics">
								<text class="volume">2424方</text>
								<text class="count">101趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow1.png"></image>
						</view>
						<view class="arrow-box arrow-box2">
							<view class="statistics">
								<text class="volume">120方</text>
								<text class="count">5趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow3.png"></image>
						</view>
					</view>
				</up-grid-item>

				<up-grid-item>
					<view class="item-box area-box">
						<image class="icon" src="/static/img/consumptionAdmin/production.png"></image>
						<view class="name">
							生产区
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box">
						<view class="arrow-box">
							<view class="statistics">
								<text class="volume">1200方</text>
								<text class="count">50趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow1.png"></image>
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box area-box">
						<image class="icon" src="/static/img/consumptionAdmin/finishedProduct.png"></image>
						<view class="name">
							成品区
						</view>
					</view>
				</up-grid-item>
			</up-grid>
		</view>
		<view class="bottom" v-if="nowFieldArea==='6'">
			<up-grid :border="false" :col="4">
				<up-grid-item>
					<view class="item-box area-box">
						<image class="icon" src="/static/img/consumptionAdmin/production.png"></image>
						<view class="name">
							生产区
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box">
						<view class="arrow-box">
							<view class="statistics">
								<text class="volume">2424方</text>
								<text class="count">101趟</text>
							</view>
							<image class="arrow" src="/static/img/consumptionAdmin/arrow1.png"></image>
						</view>

					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box area-box">
						<image class="icon" src="/static/img/consumptionAdmin/finishedProduct.png"></image>
						<view class="name">
							成品区
						</view>
					</view>
				</up-grid-item>
				<up-grid-item>
					<view class="item-box">
						<view class="arrow-box arrow-box1">
							<view class="statistics">
								<text class="volume">120方</text>
								<text class="count">5趟</text>
							</view>
							<image class="arrow arrow2" src="/static/img/consumptionAdmin/arrow2.png"></image>
						</view>
					</view>
				</up-grid-item>

			</up-grid>
		</view>
	</view>
</template>

<script setup lang="ts">
	defineProps({
		nowFieldArea: {
			type: String,
			default: '4'
		}
	})
</script>

<style scoped lang="scss">
	/* .content {
		margin: 20rpx 32rpx 0rpx;
		padding: 26rpx 24rpx;
		border-radius: 32rpx;
		background-color: #fff;
	} */

	.total-box {
		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.total-item {
				width: 310rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				background-color: rgba(46, 135, 255, 0.1);
				overflow: hidden;

				.title {
					padding: 10rpx 0rpx;
					color: #fff;
					text-align: center;
					background-color: $primary-color;
				}

				.total-content {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 30rpx;

					.volume {
						color: #000;
						font-weight: 500;
					}

					.count {
						color: $primary-color;
					}
				}

				&.total-item1 {
					background-color: rgba(255, 164, 46, 0.1);

					.title {
						background-color: $warn-color;
					}

					.count {
						color: $warn-color;
					}
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;

			.item-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.arrow-box {
				position: relative;
				width: 200rpx;
				font-size: 24rpx;
				border-radius: 8rpx;
				// box-sizing: border-box;


				&.arrow-box1 {
					margin-top: 18rpx;

					.statistics {
						background-color: rgba(255, 164, 46, 0.1);

						.count {
							color: $warn-color;
						}
					}

				}

				&.arrow-box2 {
					margin-top: 18rpx;

					.statistics {

						background-color: rgba(235, 79, 81, 0.1);

						.count {
							color: $danger-color;
						}
					}

				}

				.statistics {
					display: flex;
					justify-content: space-between;
					padding: 12rpx;
					background-color: rgba(46, 135, 255, 0.1);

					.volume {
						color: #000;
						font-weight: 500;
						white-space: nowrap;
					}

					.count {
						color: $primary-color;
						white-space: nowrap;
					}
				}

				.arrow {
					position: absolute;
					bottom: -12rpx;
					width: 100%;
					height: 24rpx;

					&.arrow2 {
						transform: rotate(180deg);
					}
				}
			}

			.area-box {

				// margin-left: 22rpx;

				&.area-box1 {
					// margin-right: 22rpx;
				}

				.icon {
					margin-bottom: 22rpx;
					width: 72rpx;
					height: 72rpx;
				}

				.name {
					white-space: nowrap;
				}
			}
		}

		.bottom2 {
			.area-box {
				font-size: 26rpx;
			}

			.arrow-box {
				width: 160rpx;
			}
		}
	}
</style>